<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>중첩된 드랍영역 (포인팅 가능)</title>
<meta name="class-lists" content="jindo.DropArea"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="마우스 포인터가 직접 드랍영역을 가리킬 수 있는 경우, 드랍영역이 겹친 것과 상관없이 포인팅된 드랍영역에만 커스텀이벤트가 발생하는 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	
	.draggable { position:absolute; width:50px; height:50px; background-color:#ccc; left:50px; top:50px; padding:10px; border:1px solid #000; cursor:move; }
	.droppable { position:absolute; background-color:#999; padding:10px; width:110px; height:110px; left:200px; top:50px; border: solid 4px #444; }
	.overed { background-color:#0075c8; }
	#phantom { position:absolute; background-color:#ecc; border:1px solid black; padding:5px; display:none; }
			
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="demo">
	<div class="droppable" style="left: 400px; top: 150px;"></div>
	<div class="droppable" style="left: 300px; top: 100px;"></div>
	<div class="droppable"></div>
	<div class="draggable">Drag me</div>
	<div id="phantom"></div> 
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.UIComponent.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.DragArea.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.DropArea.js"></script>
<script type="text/javascript">
	var oDragArea = new jindo.DragArea(document, { sClassName : 'draggable' }).attach({
		'dragStart' : function(oCustomEvent) { 
			jindo.$Element(document.body).addClass('dragging'); 
			var oMousePos = oCustomEvent.weEvent.pos(); 
			
			jindo.$Element('phantom').html(oCustomEvent.elDrag.innerHTML).show().offset(
				oMousePos.pageY + 10, 
				oMousePos.pageX + 8
			); 
			oCustomEvent.elDrag = jindo.$('phantom'); 
		}, 
		'dragEnd' : function(oCustomEvent) { jindo.$Element(document.body).removeClass('dragging'); 
			jindo.$Element('phantom').hide(); 
		} 
	});
	var oDropArea = new jindo.DropArea(document, { sClassName : 'droppable', oDragInstance : oDragArea }).attach({
		'over' : function(oCustomEvent) {
			jindo.$Element(oCustomEvent.elDrop).addClass('overed');
		},
		'move' : function(oCustomEvent) {
			oCustomEvent.elDrop.innerHTML = "내부 좌우비율:" + oCustomEvent.nRatioX.toFixed(2) + ' <br/>내부 상하비율:' + oCustomEvent.nRatioY.toFixed(2);
		},
		'out' : function(oCustomEvent) {
			jindo.$Element(oCustomEvent.elDrop).removeClass('overed').html("");
		},
		'dragEnd' : function(oCustomEvent) {
			if (oCustomEvent.aDrop.length) {
				jindo.$ElementList(oCustomEvent.aDrop).removeClass('overed');					
			}	
		}
	});
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>